<template>
    <div id="index">
        <header @click="show_img=true"></header>
        <section>
            <div v-if="true" class="left">
                <el-carousel  :autoplay="false" arrow="always" indicator-position="none">
                    <el-carousel-item class="weather"
                                      :class="{'white':item.lvl == 1,'blue':item.lvl == 2,'yellow':item.lvl == 3,'orange':item.lvl == 4,'red':item.lvl == 5}"
                                      v-for="(item, index) in warning_obj"
                                      :key="index"
                                      >

                        <img v-show="item.lvl == 1 && item.type == 0" src="../assets/images/warning/暴雨-白.png" alt="">
                        <img v-show="item.lvl == 2 && item.type == 0" src="../assets/images/warning/暴雨-蓝.png" alt="">
                        <img v-show="item.lvl == 3 && item.type == 0" src="../assets/images/warning/暴雨-黄.png" alt="">
                        <img v-show="item.lvl == 4 && item.type == 0" src="../assets/images/warning/暴雨-橙.png" alt="">
                        <img v-show="item.lvl == 5 && item.type == 0" src="../assets/images/warning/暴雨-红.png" alt="">

                        <img v-show="item.lvl == 1 && item.type == 1" src="../assets/images/warning/台风-白.png" alt="">
                        <img v-show="item.lvl == 2 && item.type == 1" src="../assets/images/warning/台风-蓝.png" alt="">
                        <img v-show="item.lvl == 3 && item.type == 1" src="../assets/images/warning/台风-黄.png" alt="">
                        <img v-show="item.lvl == 4 && item.type == 1" src="../assets/images/warning/台风-橙.png" alt="">
                        <img v-show="item.lvl == 5 && item.type == 1" src="../assets/images/warning/台风-红.png" alt="">

                        <img v-show="item.lvl == 2 && item.type == 2" src="../assets/images/warning/大风-蓝.png" alt="">
                        <img v-show="item.lvl == 3 && item.type == 2" src="../assets/images/warning/大风-黄.png" alt="">
                        <img v-show="item.lvl == 4 && item.type == 2" src="../assets/images/warning/大风-橙.png" alt="">
                        <img v-show="item.lvl == 5 && item.type == 2" src="../assets/images/warning/大风-红.png" alt="">

                        <img v-show="item.lvl == 2 && item.type == 3" src="../assets/images/warning/雷电-蓝.png" alt="">
                        <img v-show="item.lvl == 3 && item.type == 3" src="../assets/images/warning/雷电-黄.png" alt="">
                        <img v-show="item.lvl == 4 && item.type == 3" src="../assets/images/warning/雷电-橙.png" alt="">
                        <img v-show="item.lvl == 5 && item.type == 3" src="../assets/images/warning/雷电-红.png" alt="">

                        <img v-show="item.lvl == 2 && item.type == 4" src="../assets/images/warning/高温-蓝.png" alt="">
                        <img v-show="item.lvl == 3 && item.type == 4" src="../assets/images/warning/高温-黄.png" alt="">
                        <img v-show="item.lvl == 4 && item.type == 4" src="../assets/images/warning/高温-橙.png" alt="">
                        <img v-show="item.lvl == 5 && item.type == 4" src="../assets/images/warning/高温-红.png" alt="">
<!--
                        <img v-show="item.lvl == 2 && item.type == 5" src="../assets/images/warning/防汛-蓝.png" alt="">
                        <img v-show="item.lvl == 3 && item.type == 5" src="../assets/images/warning/防汛-黄.png" alt="">
                        <img v-show="item.lvl == 4 && item.type == 5" src="../assets/images/warning/防汛-橙.png" alt="">
                        <img v-show="item.lvl == 5 && item.type == 5" src="../assets/images/warning/防汛-红.png" alt="">-->
                        <div class="text" @click="yjInf(item)">
                            <span>{{item.tm || '__'}}</span>
                            <h1 class="line-clamp">{{item.nm || '__'}}</h1>
                            <p class="line-clamp">{{item.descr || '__'}}</p>
                        </div>
                        <!--<h3 class="small">{{ item }}</h3>-->
                    </el-carousel-item>
                  <!--  <div class="icon" v-show="true">
                        <i class="el-icon-arrow-left"></i>
                        <i class="el-icon-arrow-right"></i>
                    </div>-->
                </el-carousel>
                <div class="qxyj-view" v-show="qxInf == true" @click="closeyjInf">
                    <div class="arrow-p"></div>
                    <div class="yj_left">
                        <img v-show="qxyjList.lvl == 1 && qxyjList.type == 0" src="../assets/images/warning/暴雨-白.png" alt="">
                        <img v-show="qxyjList.lvl == 2 && qxyjList.type == 0" src="../assets/images/warning/暴雨-蓝.png" alt="">
                        <img v-show="qxyjList.lvl == 3 && qxyjList.type == 0" src="../assets/images/warning/暴雨-黄.png" alt="">
                        <img v-show="qxyjList.lvl == 4 && qxyjList.type == 0" src="../assets/images/warning/暴雨-橙.png" alt="">
                        <img v-show="qxyjList.lvl == 5 && qxyjList.type == 0" src="../assets/images/warning/暴雨-红.png" alt="">

                        <img v-show="qxyjList.lvl == 1 && qxyjList.type == 1" src="../assets/images/warning/台风-白.png" alt="">
                        <img v-show="qxyjList.lvl == 2 && qxyjList.type == 1" src="../assets/images/warning/台风-蓝.png" alt="">
                        <img v-show="qxyjList.lvl == 3 && qxyjList.type == 1" src="../assets/images/warning/台风-黄.png" alt="">
                        <img v-show="qxyjList.lvl == 4 && qxyjList.type == 1" src="../assets/images/warning/台风-橙.png" alt="">
                        <img v-show="qxyjList.lvl == 5 && qxyjList.type == 1" src="../assets/images/warning/台风-红.png" alt="">

                        <img v-show="qxyjList.lvl == 2 && qxyjList.type == 2" src="../assets/images/warning/大风-蓝.png" alt="">
                        <img v-show="qxyjList.lvl == 3 && qxyjList.type == 2" src="../assets/images/warning/大风-黄.png" alt="">
                        <img v-show="qxyjList.lvl == 4 && qxyjList.type == 2" src="../assets/images/warning/大风-橙.png" alt="">
                        <img v-show="qxyjList.lvl == 5 && qxyjList.type == 2" src="../assets/images/warning/大风-红.png" alt="">

                        <img v-show="qxyjList.lvl == 2 && qxyjList.type == 3" src="../assets/images/warning/雷电-蓝.png" alt="">
                        <img v-show="qxyjList.lvl == 3 && qxyjList.type == 3" src="../assets/images/warning/雷电-黄.png" alt="">
                        <img v-show="qxyjList.lvl == 4 && qxyjList.type == 3" src="../assets/images/warning/雷电-橙.png" alt="">
                        <img v-show="qxyjList.lvl == 5 && qxyjList.type == 3" src="../assets/images/warning/雷电-红.png" alt="">

                        <img v-show="qxyjList.lvl == 2 && qxyjList.type == 4" src="../assets/images/warning/高温-蓝.png" alt="">
                        <img v-show="qxyjList.lvl == 3 && qxyjList.type == 4" src="../assets/images/warning/高温-黄.png" alt="">
                        <img v-show="qxyjList.lvl == 4 && qxyjList.type == 4" src="../assets/images/warning/高温-橙.png" alt="">
                        <img v-show="qxyjList.lvl == 5 && qxyjList.type == 4" src="../assets/images/warning/高温-红.png" alt="">
                    </div>
                    <div class="yj_right">
                        <p><span>{{qxyjList.tm || '__'}}</span>
                        <!--<h1>{{qxyjList.nm || '__'}}</h1>-->
                        {{qxyjList.descr || '__'}}</p>
                    </div>
                </div>

                <ul class="content box">
                    <!--台风路径-->
                    <li v-if="active===0">
                        <iframe id="iframeA" src="http://riotest.hp.gov.cn/hptfyj/readearth/publictyphoon/" frameborder="0" name="iframeA" scrolling="no"></iframe>
                    </li>
                    <!--气象雷达-->
                    <li v-if="active===1">
                        <radar class="whMin"></radar>
                    </li>
                    <!--卫星云图-->
                    <li v-if="active===2">
                        <cloud-chart class="whMin"></cloud-chart>
                    </li>
                    <!--水雨情-->
                    <li v-if="active===3" style="display: flex">
                        <div class="rain">
                            <h1><img src="../assets/images/title-bg.png" alt="">雨情信息</h1>
                            <rain-map data_id="rain-map"/>
                            <div class="rank">
                                <div class="title">
                                    <p>降雨排行榜</p>
                                    单位 (mm)
                                </div>
                                <ul>
                                    <li v-for="(x,i) in ranking">
                                        <b v-if="rank_img[i]">
                                            <img :src="rank_img[i]" alt="">
                                        </b>
                                        <b v-else>{{i+1}}</b>
                                        <span>{{x.name}}</span>
                                        <div class="progress">
                                            <div :style="{width:percent(x.rainfall)+'%'}"></div>
                                        </div>
                                        <p>{{x.rainfall || 0}}</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="water">
                            <h1><img src="../assets/images/title-bg.png" alt="">水情信息</h1>
                            <div class="li">
                                <img src="../assets/images/reservoir.png" alt="">
                                <span>水库</span>
                                <p>漫堤<b>{{reservoirPoiLevel1}}</b></p>
                                <p>超汛限<b>{{reservoirPoiLevel2}}</b></p>
                                <p>溢洪<b>{{reservoirPoiLevel3}}</b></p>
                            </div>
                            <div class="li">
                                <img src="../assets/images/river.png" alt="">
                                <span>河道</span>
                                <p>漫堤<b>{{riverPoiLevel3}}</b></p>
                                <p>超保证<b>{{riverPoiLevel2}}</b></p>
                                <p>超警戒<b>{{riverPoiLevel1}}</b></p>
                            </div>
                            <div class="li">
                                <img src="../assets/images/waterlog.png" alt="">
                                <span>易涝点</span>
                                <p>严重积涝<b>{{floodPoiLevel3}}</b></p>
                                <p>轻微积涝<b>{{floodPoiLevel2}}</b></p>
                                <p>轻微积水<b>{{floodPoiLevel1}}</b></p>
                            </div>
							<ul class="tab1">
							    <li :class="{active:active1===i}" @click="onWaterRegime(i)" v-for="(x,i) in table_data" :key="i">{{x.name}}</li>
							</ul>
							<my-table :head="table_data[active1].th" :list="tableList"/>
                        </div>
                    </li>
                </ul>
                <ul class="tab">
                    <li :class="{active:active==0}" @click.self="active=0">
                        <iframe class="box" id="iframeB" src="https://www.readearth.com/publictyphoon/" frameborder="0" name="iframeB" scrolling="no"></iframe>
                        <p>台风路径</p>
                    </li>
                    <li :class="{active:active==1}" @click.self="active=1">
                        <radar class="whMin box"></radar>
                        <p>气象雷达</p>
                    </li>
                    <li :class="{active:active==2}" @click="active=2">
                        <cloud-chart class="whMin box"></cloud-chart>
                        <p>卫星云图</p>
                    </li>
                    <li :class="{active:active==3}" @click="active=3">
                        <rain-map data_id="rain-map1" />
                        <p>水雨情</p>
                    </li>
                </ul>
            </div>
            <div class="center">
                <div id="indexMap"></div>
				<div id="mapHome" class="" v-if="navTxt == '首页'">
				    <div v-if="!isSuperposition" class="btn-view centerH" @click="superpositionEvent(true)">
						<img src="../assets/images/superposition.png" alt="">
						<p>叠加要素</p>
					</div>
					<div v-else class="body-view">
						<img class="eliminate-img" @click="eliminateEvent" src="../assets/images/eliminate.png" alt="" />
						<img class="return-img" @click="superpositionEvent(false)" src="../assets/images/return.png" alt="" />
						<div class="sign-view" v-for="(item, index) in mapSignList" :key="index">
							<div>
								<el-checkbox size="small" @change="changeEvent(index)" v-model="item.isSelect"><span class="txt">{{item.name}}</span></el-checkbox>
							</div>

							<div class="children" v-for="(z, x) in item.Children" :key="x">
								<img class="icon" :src="z.icon" />
								<el-checkbox size="medium" @change="cutSelEvent(z)" v-model="z.isSelect"><span class="txt">{{z.name}}</span></el-checkbox>
							</div>
						</div>
					</div>
				</div>
				<div id="mapFlood"  v-if="navTxt == 'floodEvent'">
					<div class="left-view">
						<div class="up-div" style="height: 100%;">
							<div class="title">{{floodData.name}}</div>
							<div class="text-view">
								<p>当前水位：{{floodData.depth}} M</p>
								<p>负责人：{{floodData.zlzrrdh}}</p>
								<p>联系电话：{{floodData.zlzrrdh}}</p>
								<p>责任区划：{{floodData.street}}</p>
								<p>地址：{{floodData.address}}</p>
							</div>
						</div>

					</div>

					<div class="content-view">
						<div style="display: flex;">
							<div class="spot1" @click="spotEvent('flood', 29, 500)"></div>
							<div class="spot2" @click="spotEvent('flood', 49, 1000)"></div>
							<div class="spot3" @click="spotEvent('flood', 69, 1500)"></div>
							<div class="spot4" @click="spotEvent('flood', 89, 2000)"></div>
						</div>
						<img :style="{left: spotW + '%'}" :class="" src="../assets/images/spot-line.png" />
					</div>
					<div class="right-view" >
						<img src="../assets/images/retuenBtn.png" @click="homeReturnEvent"/>
					</div>

				</div>
				<div id="mapWarning" v-if="navTxt == '事件'">
					<div class="left-view">
						<div class="up-div">
							<div class="title">{{warningDetails.name}}</div>
							<div class="text-view">
								<p>事发时间：{{warningDetails.startTime}}</p>
								<p>事件地址：{{warningDetails.address}}</p>
								<p>应急等级：{{warningDetails.process_nm}}</p>
								<p>事件描述：{{warningDetails.descr}}</p>
							</div>
						</div>
						<div class="down-div">
							<div class="title">事件动态</div>
							<div class="content" >
							    <el-timeline v-if="warningDetails.dynamic[0]">
							        <el-timeline-item v-for="(item, index) in warningDetails.dynamic" :key="index" :timestamp="item.time" placement="top">
							           {{item.content}}。
							        </el-timeline-item>
							    </el-timeline>
							</div>
						</div>
					</div>

					<div class="content-view">
						<div style="display: flex;">
							<div class="spot1" @click="spotEvent('warning', 29, 500)"></div>
							<div class="spot2" @click="spotEvent('warning', 49, 1000)"></div>
							<div class="spot3" @click="spotEvent('warning', 69, 1500)"></div>
							<div class="spot4" @click="spotEvent('warning', 89, 2000)"></div>
						</div>
						<img :style="{left: spotW + '%'}" :class="" src="../assets/images/spot-line.png" />
					</div>
					<div class="right-view" >
						<img src="../assets/images/retuenBtn.png" @click="homeReturnEvent"/>
                        <button @click="$refs['pre-data'].show=true">三维模拟</button>
						<!-- <button @click="show_video=!show_video">三维模拟</button> -->
					</div>
				</div>
                <div class="nav">
                    <ul class="nav-left"><!--  -->
                        <li @click="warnEvent('streamwa', 20, 1)">
                            <span :class="riverPoiLevel > 0 ? 'warn' : ''">{{riverPoiLevel}}</span>/{{riverPoiList.length}}
                            <p>河道预警</p>
                        </li>
                        <li @click="warnEvent('streamwa', 90, 0)">
                            <span :class="reservoirPoiLevel > 0 ? 'warn' : ''">{{reservoirPoiLevel}}</span>/{{reservoirPoiList.length}}
                            <p>水库超讯</p>
                        </li>
                        <li @click="warnEvent('streamwa', 160, 2)">
                            <span :class="floodPoiLevel > 0 ? 'warn' : ''">{{floodPoiLevel}}</span>/{{floodPoiList.length}}
                            <p>内涝预警</p>
                        </li>
                        <li @click="warnEvent('streamwa', 235, 3)">
                            <span :class="rainfallPoiList.length > 0 ? 'warn' : ''">{{rainfallPoiList.length}}</span>
                            <p>1小时30mm</p>
                        </li>
                        <li @click="warnEvent('streamwa', 320, 4)">
                            <span :class="rainfallHourList.length > 0 ? 'warn' : ''">{{rainfallHourList.length}}</span>
                            <p>3小时50mm</p>
                        </li>
<!--                        <li v-show="false" @click="warnEvent('streamwa', 40)">
                            <span>0</span>
                            <p>未到报站点</p>
                        </li> -->
                    </ul>
                    <ul class="nav-right">
                        <li :class="{active:navTxt == '首页'}" @click="navTxt = '首页'" >
                            <img src="../assets/images/nav/index.png" alt="">
                            <p>首页</p>
                        </li>
                        <li v-show="false" :class="{active:navTxt == '地图标注'}" @click="navTxt = '地图标注'">
                            <img src="../assets/images/nav/mark.png" alt="">
                            <p>地图标注</p>
                        </li>
                        <li v-show="false" :class="{active:navTxt == '路径规划'}" @click="navTxt = '路径规划'">
                            <img src="../assets/images/nav/path.png" alt="">
                            <p>路径规划</p>
                        </li>
                        <li :class="{active:navTxt == '电子地图'}" @click="navTxt = '电子地图'">
                            <img src="../assets/images/nav/map.png" alt="">
                            <p>电子地图</p>
                        </li>
                    </ul>
                </div>

				<meeting-video ref="meet"/>
                <!-- <meeting-video ></meeting-video> -->
                <!-- <map-home class="map-home" :mapSignList="mapSignList" v-if="navTxt == '首页'"></map-home> -->
                <map-plotting v-if="navTxt == '地图标注'"></map-plotting>
                <map-path v-if="navTxt == '路径规划'"></map-path>
                <map-electron v-if="navTxt == '电子地图'"></map-electron>
            </div>
            <ul class="right">
                <!--应急响应-->
                <li class="box response" >
                    <div class="mess">{{responseList[0] ? responseList[0].NAME : ''}} 已持续{{responseList[0] ? responseList[0].TAKE : ''}}小时</div>
                    <div class="title"><img src="../assets/images/title-bg.png" alt="">应急响应</div>
                    <div class="content" >

                        <el-timeline v-if="responseList[0]" ><!--:class="{anim:animate==true}"-->
							<vue-seamless-scroll :data="responseList[0].dynamic" class="seamless-warp" :class-option="classOption">
								<el-timeline-item v-for="(item, index) in responseList[0].dynamic" :key="index" :timestamp="item.time+' '+item.unit" placement="top">
								   {{item.content}}。
								</el-timeline-item>
							</vue-seamless-scroll>
                        </el-timeline>

                    </div>
                </li>
                <!--防御情况-->
                <li class="box">
                    <div class="mess">当前事件数量<span>{{timeEventList.length}}</span></div>
                    <div class="title"><img src="../assets/images/title-bg.png" alt="">防御情况</div>
                    <div class="content">
                        <div class="thead">
                            <div class="th">领域名称</div>
                            <div class="th">数量</div>
                        </div>
                        <ul class="tbody">
                            <li v-for="(item, index) in disasterDefStatisticsList" :key="index">
                                <div class="td">{{item.name}}</div>
                                <div class="td">{{item.value}}</div>
                            </li>
                        </ul>
                    </div>
                </li>
                <!--融合通讯-->
                <li class="box">
                    <!-- <div class="video" @click="$refs.reservoir.show=true"> -->
					<div class="video" @click="videoTo(false)">
                        <img src="../assets/images/video.png" alt="">
                    </div>
                    <div class="title"><img src="../assets/images/title-bg.png" alt="">融合通讯</div>
                    <div class="content">
                        <div class="thead">
                            <div class="th">用户名</div>
                            <div class="th">操作</div>
                        </div>
                        <ul class="tbody">
                            <li v-for="(item, index) in videoRecordingList" :key="index" :class="videoRecordingList.length > 0 ? 'online' : ''">
                                <div class="td">
                                    <span class="point"></span>
                                    {{item.displayName || '__'}}
                                </div>
                                <div class="td">
                                    <i class="el-icon-phone" @click="callTo(item)"></i>
                                    <i class="el-icon-video-camera-solid" @click="videoTo(item)"></i>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <!--值班信息-->
                <li class="box">
                    <div class="title"><img src="../assets/images/title-bg.png" alt="">值班信息</div>
                    <div class="content">
                        <div class="leader">
                            <i class="el-icon-user-solid"></i>
                            <h4>带班领导：</h4>
                            <div style="display: flex;" class="person" v-if="dutyList.dblds && dutyList.dblds.length > 0">
                                <span>{{dutyList.dblds[0].zbry}}</span>
                                <p>{{dutyList.dblds[0].lxfs}}</p>
                                <i class="el-icon-phone" @click="callTo(dutyList.dblds[0])"></i>
                            </div>
                        </div>
                        <div class="member">
                            <h4>值班人员：</h4>
                            <div style="display: flex;" class="person" v-for="(item, index) in dutyList.zbrys" :key="index">
                                <span>{{item.zbry}}</span>
                                <p>{{item.lxfs}}</p>
                                <i class="el-icon-phone" @click="callTo(item)"></i>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <div class="popover-view" v-if="isPopover" @click="tebleEvent">
            <div class="arrow-p" :style="{left: leftV}"></div>
			<my-table v-if="warningLevelList.length > 0" :head="titleList" :list="warningLevelList" />

			<img v-else src="../assets/images/nothing.png" />
			<!-- <my-table :head="titleList" :list="txtList" :rollH="scaleV * 166 + 'px'"></my-table> -->
        </div>

        <alert ref="alert"/>
        <map-dialog class="map-flood" title="易涝点详情" ref="flood">
            <div class="details-view" >
                <div v-for="(item, index) in floodInfo.navList" :key="index" >
                    <div @click="clickEvent(index)" :class="item.isSel ? 'clickBg' : ''">{{item.name}}</div>
                </div>
            </div>
            <div v-if="navIndex == 0" class="list-view">
               <div  class="list">
                    <div class="r-1">名称</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.name}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">位置</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.address}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">所在街道</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.street}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">所在社区</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.community}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">类型</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.type}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">是否安装检测设备</div>
                    <div class="r-2 flex align-items">
                        <div>1</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">积水深度（m）</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.depth}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">预警阈值（小时雨量）</div>
                        <div class="r-2 flex align-items">
                            <div>{{flood_data.yjyz}}</div>
                        </div>
                    </div>
                <div  class="list" >
                    <div class="r-1">历史最高积水深度</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.lszgjs}}</div>
                    </div>
                </div>

            </div>
            <div v-if="navIndex == 1">
                <div  class="list">
                    <div class="r-1">关注程度</div>
                    <div class="r-2 flex align-items">
                        <p>{{flood_data.attn}}</p>
                    </div>
                </div>
                <div  class="list">
                    <div class="r-1">积涝原因</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.reason}}</div>
                    </div>
                </div>
                <div  class="list">
                    <div class="r-1">当前主要风险</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.fxts}}</div>
                    </div>
                </div>
            </div>
            <div v-if="navIndex == 2">
                <div  class="list">
                    <div class="r-1">治理或预防措施</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.zlcs}}</div>
                    </div>
                </div>
            </div>
            <div v-if="navIndex == 3">
                <div  class="list">
                    <div class="r-1">工作进展及成效</div>
                    <div class="r-2 flex align-items">
                        <div>{{flood_data.zlqk}}</div>
                    </div>
                </div>
            </div>
            <div v-if="navIndex == 4">
                <div  class="list">
                    <div class="r-1">治理单位及责任人</div>
                    <div class="r-2 flex align-items">
                        <p>{{flood_data.zlzrr}}</p>
                    </div>
                </div>
                <div  class="list">
                    <div class="r-1">治理单位责任人联系电话</div>
                    <div class="r-2 flex align-items">
                        <p>{{flood_data.zlzrrdh}}<i class="el-icon-phone" @click="callSb(flood_data)" v-show="flood_data.zlzrrdh != null"></i></p>
                    </div>
                </div>
                <div  class="list">
                    <div class="r-1">巡察单位及责任人</div>
                    <div class="r-2 flex align-items">
                        <p>{{flood_data.xczrr}}</p>
                    </div>
                </div>
                <div  class="list">
                    <div class="r-1">巡察责任人联系电话</div>
                    <div class="r-2 flex align-items">
                        <p>{{flood_data.xczrrdh}}<i class="el-icon-phone" @click="callSb(flood_data)" v-show="flood_data.xczrrdhe != null"></i></p>
                    </div>
                </div>
                <div  class="list">
                    <div class="r-1">临灾值守单位及值守人</div>
                    <div class="r-2 flex align-items">
                        <p>{{flood_data.contact}}</p>
                    </div>
                </div>
                <div  class="list">
                    <div class="r-1">临灾值守人联系电话</div>
                    <div class="r-2 flex align-items">
                        <p>{{flood_data.contactphone}}<i class="el-icon-phone" @click="callSb(flood_data)" v-show="flood_data.contactPhone!= null"></i></p>
                    </div>
                </div>
            </div>
            <!--<div v-if="navIndex == 5">
                <el-carousel :interval="5000" arrow="always"  >
                    <el-carousel-item v-for="(item, index) in floodInfo.imgList" :key="index" class="carousel-view" >
                        <img class="carousel-img" :src="item.img" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </div>-->
			<div class="bottom-view">
				<div style="display: flex;" @click="e=>{ $refs.flood.show=false; $refs['pre-data'].show=true }">
					三维模拟
					<img src="../assets/images/3D.png" alt="">
				</div>
				<div class="right-btn" style="display: flex;" @click="floodNearbyEvent">
					附近资源
					<img src="../assets/images/nearby.png" alt="">
				</div>
			</div>
        </map-dialog>
        <map-dialog class="pre-data" title="三维模拟" ref="pre-data" >
            <video src="http://10.197.135.25:8099/gis/media/over.mp4" autoplay></video>
<!--            <ul v-else>
                <li v-for="x in 6">
                    <div>第{{x}}小时降雨量</div>
                    <input type="text">
                </li>
            </ul> -->

           <!-- <div class="bottom"> -->
                <!-- <button @click="show_video=!show_video">{{show_video?'返回':'计算'}}</button> -->
				<!-- <button @click="show_video=!show_video">{{show_video?'返回':'计算'}}</button> -->
            <!-- </div> -->
        </map-dialog>
        <map-dialog class="map-video" title="视频监控" ref="video">
            <video ref="show_video" autoplay></video>
        </map-dialog>
        <map-dialog class="map-rain" title="雨量站详情" ref="rainfall">
            <div class="detail">
                <div class="top">
                    <p>累计雨量：<span>{{rainsTotal}}mm</span></p>
                    <p>站址：<span>{{rainfall.address}}</span></p>
                </div>
                <div class="content">
                    <el-radio-group size="mini" v-model="rain_radio" @change="changeRainRadio">
                        <el-radio-button label="线状图"/>
                        <el-radio-button label="报表"/>
                    </el-radio-group>
                    <h1>萝岗滑动雨量</h1>
                    <time>{{rainfall.uptime}}</time>
                    <div class="charts" ref="rain_charts" v-show="rain_radio==='线状图'"></div>
                    <ul class="table" v-show="rain_radio==='报表'">
                        <li>
                            <p>时间段</p>
                            <p>滑动降雨量</p>
                        </li>
                        <li v-for="x in rainfallList" :key="x.time">
                            <p>{{x.uptime}}</p>
                            <p>{{x.rain}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </map-dialog>
        <map-dialog class="map-river" id="map-river" title="河道水位站详情" ref="river">
            <map-dialog-river :river="river" :river-id="riverId"></map-dialog-river>
        </map-dialog>
        <map-dialog class="map-reservoir" id="map-reservoir" title="水库详情" ref="reservoir">
            <div class="detail">
                <el-row type="flex" class="reservoir-wrap">
                    <el-col :span="12" class="left-col">
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">名称：</span>
                            <span>{{reservoir.NM}}</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">辖区：</span>
                            <span>{{reservoir.STREET}}</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">检测时间：</span>
                            <span>{{reservoir.TM}}</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">当前水位：</span>
                            <span v-show="reservoir.DQSW">{{reservoir.DQSW}}m</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">汛限水位：</span>
                            <span v-if="reservoir.LIMITED_WATER_LEVEL">{{reservoir.LIMITED_WATER_LEVEL}}m</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">校核洪水位：</span>
                            <span v-show="reservoir.CHECK_WATER_LEVEL">{{reservoir.CHECK_WATER_LEVEL}}m</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">设计洪水位：</span>
                            <span v-show="reservoir.WATER_LEVEL">{{reservoir.WATER_LEVEL}}m</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">校核洪水标准：</span>
                            <span v-show="reservoir.CHECK_FLOOD_STANDARD">{{reservoir.CHECK_FLOOD_STANDARD}}%</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">设计洪水标准：</span>
                            <span v-show="reservoir.FLOOD_STANDARD">{{reservoir.FLOOD_STANDARD}}%</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">调洪库容：</span>
                            <span>{{reservoir.FLOOD_DIVERSION_CAPACITY}}</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">建成日期：</span>
                            <span>{{reservoir.BUILD_TIME}}</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">正常蓄水量：</span>
                            <span v-if="reservoir.NORMAL_WATER_LEVEL">{{reservoir.NORMAL_WATER_LEVEL}}万立方米</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">类型：</span>
                            <span>{{reservoir.R_TYPE}}</span>
                        </p>
                        <p class="flex-wrap align-items-center">
                            <span style="width:45%">备注：</span>
                            <span>{{reservoir.DESCR}}</span>
                        </p>
                    </el-col>
                    <el-col :span="12" class="right-col">
                        <div class="charts" ref="reservoir_charts"></div>
                    </el-col>
                </el-row>
            </div>
        </map-dialog>
        <map-dialog class="map-waterLv" title="积水监测点详情" ref="water">
            <map-dialog-water :water="water" :water-id="waterId"></map-dialog-water>
        </map-dialog>
        <map-dialog class="map-dialog" ref="billboard" title="大型广告牌">
            <div class="detail">
                <div><p class="tlt">名称：</p><p>{{billboardList.NM}}</p></div>
                <div><p class="tlt">位置：</p><p>{{billboardList.ADDR}}</p></div>
                <div><p class="tlt">负责人1：</p><p>{{billboardList.FZR}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{billboardList.FZRDH}}<i class="el-icon-phone"  @click="confirmCall(billboardList)" ></i></p><!--@click="callSb(billboardList)"--></div>
                <div><p class="tlt">负责人2：</p><p>{{billboardList.FZR2}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{billboardList.FZRDH2}}<i class="el-icon-phone" @click="callSb(billboardList)" v-show="billboardList.FZRDH2 != null"></i></p></div>
                <div><p class="tlt">负责人3：</p><p>{{billboardList.FZR3}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{billboardList.FZRDH3}}<i class="el-icon-phone" @click="callSb(billboardList)" v-show="billboardList.FZRDH3 != null"></i></p></div>
                <div><p class="tlt">街道：</p><p>{{billboardList.STREET}}</p></div>
                <div><p class="tlt">面积（m²）：</p><p>{{billboardList.AREA}}</p></div>
                <div><p class="tlt">用途：</p><p>{{billboardList.DESCR}}</p></div>
            </div>
        </map-dialog>
        <map-dialog class="map-constructiont" ref="constructiont" title="在建工地">
            <div class="detail">
                <div><p class="tlt">名称：</p><p>{{constructiontList.NM}}</p></div>
                <div><p class="tlt">位置：</p><p>{{constructiontList.ADDR}}</p></div>
                <div><p class="tlt">经纬度：</p><p>{{constructiontList.LONGITUDE}}/{{constructiontList.LATITUDE}}</p></div>
                <div><p class="tlt">面积：</p><p>{{constructiontList.AREA}}</p></div>
                <div><p class="tlt">用途：</p> <p>{{constructiontList.DESCR}}</p></div>
                <div><p class="tlt">负责人：</p><p>{{constructiontList.FZR}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{constructiontList.FZRDH}}<i class="el-icon-phone" @click="callSb(constructiontList)" v-show="constructiontList.FZRDH != null"></i></p></div>
                <div><p class="tlt">街道：</p><p>{{constructiontList.STREET}}</p></div>
                <div><p class="tlt">建设单位：</p> <p>{{constructiontList.CONSTRUCTION}}</p></div>
                <div><p class="tlt">监理单位：</p> <p>{{constructiontList.SUPERVISION}}</p></div>
                <div><p class="tlt">施工单位：</p> <p>{{constructiontList.BUILDER}}</p></div>
            </div>
        </map-dialog>
        <map-dialog class="map-slope" ref="slope" title="危险边坡">
            <div class="detail">
               <div><p class="tlt">名称：</p><p>{{slopeList.NM}}</p></div>
                <div><p class="tlt">位置：</p><p>{{slopeList.ADDR}}</p></div>
                <div><p class="tlt">负责人1：</p><p>{{slopeList.FZR}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{slopeList.FZRDH}}<i class="el-icon-phone" @click="callSb(slopeList)" v-show="slopeList.FZRDH != null"></i></p></div>
                <div> <p class="tlt">负责人2：</p><p>{{slopeList.FZR2}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{slopeList.FZRDH2}}<i class="el-icon-phone" @click="callSb(slopeList)" v-show="slopeList.FZRDH2 != null"></i></p></div>
                <div> <p class="tlt">负责人3：</p><p>{{slopeList.FZR3}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{slopeList.FZRDH3}}<i class="el-icon-phone" @click="callSb(slopeList)" v-show="slopeList.FZRDH3 != null"></i></p></div>
                <div><p class="tlt">街道：</p><p>{{slopeList.STREET}}</p></div>
                <div><p class="tlt">社区：</p><p>{{slopeList.COMMUNITY}}</p></div>
                <div> <p class="tlt">风险等级：</p><p>{{slopeList.WXCD}}</p></div>
                <div> <p class="tlt">危险性预测：</p><p>{{slopeList.YHXZ}}</p></div>
                <div><p class="tlt">主要风险：</p><p>{{slopeList.WXDX}}</p></div>
            </div>
        </map-dialog>
        <map-dialog class="map-underMarket" ref="underMarket" title="地下商城">
            <div class="detail">
                <div><p class="tlt">名称：</p><p>{{marketList.NM}}</p></div>
                <div><p class="tlt">位置：</p><p><span></span>{{marketList.ADDR}}</p></div>
                <div><p class="tlt">负责人1：</p><p>{{marketList.FZR}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{marketList.FZRDH}}<i class="el-icon-phone" @click="callSb(marketList)" v-show="marketList.FZRDH != null"></i></p></div>
                <div><p class="tlt">负责人2：</p><p>{{marketList.FZR2}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{marketList.FZRDH2}}<i class="el-icon-phone" @click="callSb(marketList)" v-show="marketList.FZRDH2 != null"></i></p></div>
                <div><p class="tlt">负责人3：</p><p>{{marketList.FZR3}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{marketList.FZRDH3}}<i class="el-icon-phone" @click="callSb(marketList)" v-show="marketList.FZRDH3 != null"></i></p></div>
                <div><p class="tlt">出口个数：</p><p>{{marketList.EXIT_NUM}}</p></div>
                <div><p class="tlt">入口个数：</p><p>1</p></div>
                <div><p class="tlt">面积（m²）：</p><p>{{marketList.ENTRY_NUM}}</p></div>
                <div><p class="tlt">服务时间：</p><p>{{marketList.SER_TM}}</p></div>
            </div>
        </map-dialog>
        <map-dialog class="map-underPark" ref="underPark" title="地下停车场">
            <div class="detail">
                <div><p class="tlt">名称：</p><p>{{underParkList.NM}}</p></div>
                <div><p class="tlt">位置：</p><p>{{underParkList.ADDR}}</p></div>
                <div><p class="tlt">负责人：</p><p>{{underParkList.FZR}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{underParkList.FZRDH}}<i class="el-icon-phone" @click="callSb(underParkList)" v-show="marketList.FZRDH != null"></i></p></div>
                <div><p class="tlt">街道：</p><p>{{underParkList.STREET}}</p></div>
                <div><p class="tlt">社区：</p><p>1</p></div>
                <div><p class="tlt">面积（m²）：</p><p>{{underParkList.AREA}}</p></div>
                <div><p class="tlt">停车场总泊位：</p><p>{{underParkList.BERTH}}</p></div>
                <div><p class="tlt">出口个数：</p><p>{{underParkList.EXIT_NUM}}</p></div>
                <div><p class="tlt">入口个数：</p><p>{{underParkList.ENTRY_NUM}}</p></div>
                <div><p class="tlt">服务时间：</p><p>{{underParkList.SER_TM}}</p></div>
            </div>
        </map-dialog>
        <map-dialog class="map-park" ref="park" title="公园详情">
            <div class="details-view" >
                <div v-for="(item, index) in parkInfo.navList" :key="index" >
                    <div @click="clickEvent(index)" :class="item.isSel ? 'clickBg' : ''">{{item.name}}</div>
                </div>
            </div>
            <div v-if="navIndex == 0" class="list-view">
                <div  class="list" >
                    <div class="r-1">名称</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.NM}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">位置</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.ADDR}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">类别</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.LB}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">面积</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.AREA}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">建成时间</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.BUILD_DATE}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">是否市级避险场所</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.SFSSJBXCS}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">是否有游乐设施</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.SFYYLSS}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">大型游乐设施</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.DXYLSS}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">所属街道</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.STREET}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">公园责任人及职务</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.FZR}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">公园责任人联系方式</div>
                    <div class="r-2 flex align-items">
                        <div>{{parkList.FZRDH}}<i class="el-icon-phone" @click="callSb(parkList)" v-show="parkList.FZRDH != null"></i></div>
                    </div>
                </div>
               <!-- <div v-if="parkInfo.txtlist.length == 0" class="center">
                    <img class="nothing" src="../assets/images/nothing.png" alt="" />
                </div>-->

            </div>
            <!--<div v-if="navIndex == 1">
                <el-carousel :interval="5000" arrow="always"  >
                    <el-carousel-item v-for="(item, index) in parkInfo.imgList" :key="index" class="carousel-view" >
                        <img class="carousel-img" :src="item.img" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </div>-->
        </map-dialog>
        <map-dialog class="map-coast" ref="coast" title="重点防护点">
            <div class="details-view" >
                <div v-for="(item, index) in coastInfo.navList" :key="index" >
                    <div @click="clickEvent(index)" :class="item.isSel ? 'clickBg' : ''">{{item.name}}</div>
                </div>
            </div>
            <div v-if="navIndex == 0" class="list-view">
                <div  class="list" >
                    <div class="r-1">名称</div>
                    <div class="r-2 flex align-items">
                        <div>{{coastList.NM}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">具体位置</div>
                    <div class="r-2 flex align-items">
                        <div>{{coastList.ADDR}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">所属街道</div>
                    <div class="r-2 flex align-items">
                        <div>{{coastList.STREET}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">基本情况</div>
                    <div class="r-2 flex align-items">
                        <div>{{coastList.DESCR}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">风险隐患</div>
                    <div class="r-2 flex align-items">
                        <div>{{coastList.FXYH}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">所在街道负责人</div>
                    <div class="r-2 flex align-items">
                        <div>{{coastList.STREETCONTACT}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">负责人联系电话</div>
                    <div class="r-2 flex align-items">
                        <div>{{coastList.DH}}<i class="el-icon-phone" @click="callSb(coastList)" v-show="coastList.DH != null"></i></div>
                    </div>
                </div>
                <!-- <div v-if="parkInfo.txtlist.length == 0" class="center">
                     <img class="nothing" src="../assets/images/nothing.png" alt="" />
                 </div>-->

            </div>
            <div v-if="navIndex == 1">
                <el-carousel :interval="5000" arrow="always"  >
                    <el-carousel-item v-for="(item, index) in parkInfo.imgList" :key="index" class="carousel-view" >
                        <img class="carousel-img" :src="item.img" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </map-dialog>
        <map-dialog class="map-dangerousbuilding" ref="dangerousbuilding" title="危房详情">
            <div class="details-view" >
                <div v-for="(item, index) in dangerousbuildingInfo.navList" :key="index" >
                    <div @click="clickEvent(index)" :class="item.isSel ? 'clickBg' : ''">{{item.name}}</div>
                </div>
            </div>
            <div v-if="navIndex == 0" class="list-view">
                <div  class="list" >
                    <div class="r-1">名称</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.NM}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">位置</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.ADDR}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">所属街道</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.STREET}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">所在社区</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.COMMUNITY}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">建筑面积</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.AREA}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">楼层数量</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.LCSL}}</div>
                    </div>
                </div>
                <!-- <div v-if="parkInfo.txtlist.length == 0" class="center">
                     <img class="nothing" src="../assets/images/nothing.png" alt="" />
                 </div>-->
            </div>
            <div v-if="navIndex == 1">
                <div  class="list" >
                    <div class="r-1">隐患现状</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.YHXZ}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">风险等级</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.WXCD}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">主要风险</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.WXDX}}</div>
                    </div>
                </div>
            </div>
            <div v-if="navIndex == 2">
                <div  class="list" >
                    <div class="r-1">治理或预防措施</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.ZLCS}}</div>
                    </div>
                </div>
            </div>
            <div v-if="navIndex == 3">
                <div  class="list" >
                    <div class="r-1">工作进展及成效</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.ZLQK}}</div>
                    </div>
                </div>
            </div>
            <div v-if="navIndex == 4">
                <div  class="list" >
                    <div class="r-1">治理单位及责任人</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.ZLZRR}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">治理责任人联系电话</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.ZLZRRDH}}<i class="el-icon-phone" @click="callSb(flood_data)" v-show="flood_data.ZLZRRDH != null"></i></div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">巡查单位及责任人</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.FZR}}</div>
                    </div>
                </div>
                <div  class="list" >
                    <div class="r-1">巡查责任人联系电话</div>
                    <div class="r-2 flex align-items">
                        <div>{{dangerousbuildingList.FZRDH}}<i class="el-icon-phone" @click="callSb(flood_data)" v-show="flood_data.FZRDH != null"></i></div>
                    </div>
                </div>

            </div>
            <!--<div v-if="navIndex == 5">
                <el-carousel :interval="5000" arrow="always"  >
                    <el-carousel-item v-for="(item, index) in dangerousbuildingInfo.imgList" :key="index" class="carousel-view" >
                        <img class="carousel-img" :src="item.img" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </div>-->
        </map-dialog>
        <map-dialog class="map-riverGate" ref="riverGate" title="河道闸门">
            <div class="detail">
                <div><p class="tlt">名称：</p><p>{{riverGateList.NM}}</p></div>
                <div><p class="tlt">位置：</p><p>{{riverGateList.ADDR}}</p></div>
                <div><p class="tlt">负责人：</p><p>{{riverGateList.FZR}}</p></div>
                <div><p class="tlt">联系电话：</p><p>{{riverGateList.FZRDH}}<i class="el-icon-phone" @click="callSb(riverGateList)" v-show="riverGateList.FZRDH != null"></i></p></div>
                <div><p class="tlt">河流（水系）：</p><p>{{riverGateList.WATER_SYSTEM}}</p></div>
                <div><p class="tlt">建成日期：</p><p>{{riverGateList.BUILD_DATE}}</p></div>
                <div><p class="tlt">管理单位：</p><p>{{riverGateList.MANAGE}}</p></div>
                <div><p class="tlt">设计过闸流量：</p><p>{{riverGateList.FLOW}}</p></div>
                <div><p class="tlt">主要功能：</p><p>{{riverGateList.FUN}}</p></div>
                <div><p class="tlt">水闸孔数：</p><p>{{riverGateList.HOLES}}</p></div>
                <div><p class="tlt">闸孔净宽：</p><p>{{riverGateList.WIDTH}}</p></div>
            </div>
        </map-dialog>
        <map-dialog class="map-dialog" ref="shelter" title="避难场所详情">
            <map-dialog-shelter :shelter="shelter" @click="call"></map-dialog-shelter>
        </map-dialog>
        <map-dialog class="map-dialog" ref="medical" title="医疗机构详情">
            <map-dialog-medical :medical="medical" @click="call"></map-dialog-medical>
        </map-dialog>
        <map-dialog class="map-dialog" ref="team" title="应急队伍详情">
            <map-dialog-team :team="team" @click="call"></map-dialog-team>
        </map-dialog>
        <map-dialog class="map-dialog" ref="material" title="物资储备站详情">
            <map-dialog-material :material="material" @click="call"></map-dialog-material>
        </map-dialog>
        <!-- <map-dialog class="map-dialog" ref="person" title="人员定位详情">
            <map-dialog-person :person="person" @click="call"></map-dialog-person>
        </map-dialog> -->
            <!-- <map-dialog-person :person="person" @click="call"></map-dialog-person> -->


        <div class="map-confirm" ref="" v-show="tc == true">
            <div class="title">
                <i class="el-icon-s-opportunity"></i>
                <span>提示</span>
            </div>
            <div class="content">
                <p>确认拨打电话</p>
                <p>{{callName}}</p>
                <p>{{callNum}}</p>
                <div>
                    <button @click="callSb(billboardList)">确认</button>
                    <button @click="cancelConfirm()">取消</button>
                </div>
            </div>
        </div>
        <!--<img style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: .8;z-index: 2;" v-show="show_img" @click.stop="show_img=false" src="https://axure-file.lanhuapp.com/8de49187-5ddb-48d7-ac66-cdaf2ac472a4__ca08169ac3f4d0ec58bdce420093cff8.png" alt="">-->
    </div>
</template>

<script type="text/ecmascript-6">
	import $ from 'jquery';
    import {loadModules} from 'esri-loader';
	import vueSeamlessScroll from 'vue-seamless-scroll'
    import MyTable from '../components/MyTable'
    import MapHome from '../components/MapHome'
    import MapPlotting from '../components/MapPlotting'
    import MapDialog from '../components/MapDialog'
    import MapPath from '../components/MapPath'
    import MapElectron from '../components/MapElectron.vue'
    import AlikeDetailsView from '../components/AlikeDetailsView.vue'

    import MapDialogShelter from '../components/MapDialogShelter.vue'
    import MapDialogTeam from '../components/MapDialogTeam.vue'
    import MapDialogMedical from '../components/MapDialogMedical.vue'
    import MapDialogMaterial from '../components/MapDialogMaterial.vue'
    import MapDialogPerson from '../components/MapDialogPerson.vue'
	import MapDialogRiver from '../components/MapDialogRiver.vue'
	import MapDialogWater from '../components/MapDialogWater.vue'

    import Radar from '../components/Radar'
    import CloudChart from '../components/CloudChart'

    import zst from '../assets/js/zst'
    import zg from '../assets/js/zg'
    import yui from "../assets/js/yui"
    import terry from '../assets/js/terry'
	import mapEnum from '../assets/js/mapEnum'
    import RainMap from '../components/RainMap'

    import MeetingVideo from '../components/MeetingVideo'
    import Alert from '../components/Alert'
    import flv from '../assets/js/flv.min'

    export default {
        data() {
            return {
                waterLv:['未建站','正常','轻微积水','轻微内涝','严重内涝'],
				indexMap: {},
				graphicsLayer: {},
                active: 3,
                view: {},
                show_img:false,
                url: '../static/ldtx.html'
            }
        },
		computed: {
			classOption () {
				return {
					esri: {},
					step: 0.5,
					limitMoveNum: this.responseList.length,
					hoverStop: true,
					direction: 1,
					openWatch: true,
					singleHeight: 0,
					singleWidth: 0,
					waitTime: 1000
				}
			}
		},
		created() {

			// this.getData();
			// console.log('tableList', this.tableList)
		},

        mounted() {
            //测试
			let _this=this;
			loadModules([
			    "esri/Map",
			    "esri/views/MapView",
				"esri/layers/MapImageLayer",
			    "esri/layers/TileLayer",
				"esri/Basemap",
				"esri/layers/GraphicsLayer",
			    "esri/Graphic",
				"esri/geometry/Circle",
			    "esri/geometry/Point",
				"esri/geometry/geometryEngine",
				"esri/symbols/LineSymbol",
				"esri/Camera",
				"esri/layers/ElevationLayer",
			    "esri/symbols/PictureMarkerSymbol",
                "esri/geometry/Extent",
			    "dojo/domReady!"
			], {url: 'api/init.js'}).then(([Map,MapView,MapImageLayer,TileLayer,Basemap,GraphicsLayer,Graphic,CircleGeometry,Point,geometryEngine,LineSymbol,Camera,ElevationLayer,PictureMarkerSymbol,Extent]) => {
				this.esri = {
					Map: Map,
					MapView: MapView,
					MapImageLayer: MapImageLayer,
					TileLayer: TileLayer,
					Basemap: Basemap,
					GraphicsLayer: GraphicsLayer,
					Graphic: Graphic,
					CircleGeometry: CircleGeometry,
					GeometryEngine: geometryEngine,
                    Extent:Extent
				};
				var basemap = new Basemap({
				    baseLayers: [
				        new TileLayer({
							// url: "https://gzcimenterprise.gzcc.gov.cn/server/rest/services/basemap/HPQTDOM/MapServer"
				            url: "http://10.194.150.155:8010/ServiceAccess/MapService-T/2017年卫星影像地图_广州2000坐标系_/19f3612a2b44e98baae1f40713a085b6",
				        }),
						new MapImageLayer({
						    url: "https://gzcimportal.gzcc.gov.cn/server/rest/services/hpMap/hpq_fw/MapServer",
						}),
						new MapImageLayer({
						    url: "https://gzcimportal.gzcc.gov.cn/server/rest/services/hpMap/hpq_gz_erase/MapServer",
						}),
				    ],
				});
				this.indexMap = new Map({
				    basemap: basemap,
				});

			    //创建地图容器
			    this.view = new MapView({
			        container: "indexMap",
			        map: this.indexMap,
                    scale: 72192,
                    zoom:12,
                    extent:new Extent({
                        xmin:38209.32885608646,
                        ymin:223283.65567826937,
                        xmax:84949.07993558863,
                        ymax:253730.39177174153,
                        spatialReference:'PROJCS["GUANGZHOU2000",GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Gauss_Kruger"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",113.28],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]]'
                    }),
			    });
				this.circleGraphicsLayer = new GraphicsLayer({
					id: "graphicsLayer-alarm"
				});
				this.indexMap.add(this.circleGraphicsLayer);

			    this.view.ui.remove('zoom');
			    this.view.ui.remove('attribution');

				this.getData();

				this.view.on("click",v=>{
				    this.view.hitTest({x: v.x, y: v.y}).then(response=>{
				        let result = response.results[0];
				        if (result) {
				            _this.mapTypeIndex = result.graphic.symbol.params;
				            _this.$refs[result.graphic.symbol.classes].show = result.graphic.visible;

				            if(result.graphic.symbol.classes=='flood'){
				                this.$axios.floodget({id:result.graphic.id}).then(v=>{
				                    if(v.resultCode==200){
				                        this.flood_data=v.data;
				                    }
				                })
				            }
							if(result.graphic.symbol.classes=='video'){
				                this.setVideo(result.graphic.symbol.data.czbm,result.graphic.symbol.data.cgqbh);
				                console.log(result.graphic.symbol.data)
				            }

				            this.riskEvent(result)
							this.seekPlace(result)
						}


				    });
				});
			});
        },
        methods: {
			// 把经纬度转xy坐标
			getXY(data) {
				let tempList = []
				if (data.length > 0) {
					$.ajax({
						url:'http://10.198.246.65:8084/agcom/agCoordTransController/transGeoJsonWGS84ToGZ2000',
						async:false,
						type:'POST',
						contentType:'application/json; charset=UTF-8',
						data:JSON.stringify(data),
						success:function(data){
							tempList = JSON.parse(data)
						}
					});
				}

				return tempList
			},


        },
        components: {
            MyTable,
            MapHome,
            MapPlotting,
            MeetingVideo,
            MapDialog,
            MapPath,
            MapElectron,
            AlikeDetailsView,
            Radar,
            CloudChart,
            Alert,
            RainMap,
            MapDialogShelter,
            MapDialogTeam,
            MapDialogMedical,
            MapDialogMaterial,
            MapDialogPerson,
			MapDialogRiver,
			MapDialogWater,
			vueSeamlessScroll
        },
        beforeDestroy() {
            if (this.view) {
                // destroy the map view
                this.view.container = null;
            }
			this.stopFlash()
        },
        mixins: [zst, zg, yui, terry]
    }
</script>

<style lang="less">
    @import '../../public/api/esri/css/main.css';
    @import "../assets/css/zst";
    @import '../assets/css/zg';
    @import '../assets/css/yui';
	@import '../assets/css/terry';


    #index {
        position: relative;
        width: 2048px*@ratio;
        height: 768px*@ratio;
        overflow: auto;
        background: url(../assets/images/background.jpg) no-repeat center/100% 100%;

        .box {
            border-radius: 5px*@ratio;
            background: #051825;
        }
        .esri-view-surface{
            outline: none;
        }

        header {height: 98px*@ratio}

        section {
            padding: 30px*@ratio 38px*@ratio 40px*@ratio;
            @a: 98px*@ratio;
            height: calc(~'100% - ' @a);

            &>.left {
                width: 579.5px*@ratio;
                float: left;
                position: relative;
                top: -55px*@ratio;
                    .el-carousel__container{
                    height: 55px*@ratio;
                    box-sizing: border-box;
                    .el-carousel__arrow{
                        background-color: rgba(31,45,61,0);
                        i{
                            font-size: 30px*@ratio;
                        }
                    }
                    .el-carousel__arrow--left{
                        top: 30%;
                        left: 88%;
                    }
                    .el-carousel__arrow--right{
                        top:30%;
                        right: 5%;
                    }
                    .weather{
                        bottom: 100%;
                        left: 0;
                        margin: 0 0 7px*@ratio;
                        position: absolute;
                        width: 100%;
                        height: 48px*@ratio;
                        overflow: hidden;
                        border-radius: 3px*@ratio;
                        img{
                            display: block;
                            height: 85%;
                            float: left;
                            margin:4px*@ratio 10px*@ratio 5px*@ratio 5px*@ratio;
                        }
                        .text{
                            float: left;
                            color: rgba(255, 255, 255, .8);
                            font-size: 16px*@ratio;
                            width: 480px*@ratio;
                            padding:5px*@ratio 0;
                            h1{
                                font-size: 18px*@ratio;
                                display: inline-block;
                                font-weight: normal;
                                margin: 0 15px*@ratio 0 15px*@ratio;
                                max-width: 250px*@ratio;
                               /* vertical-align: middle;*/
                            }
                            span{
                                /*vertical-align: middle;*/
                            }
                            p{
                                display: block;
                                padding: 5px*@ratio 0 0;
                                width:400px*@ratio;
                            }
                        }
                        .icon{
                            font-size: 16px*@ratio;
                            color:#fff;
                            float: right;
                            line-height: 40px*@ratio;
                            padding: 0 10px*@ratio;
                        }
                    }
                    .white{
                        background: linear-gradient(to right,rgba(255, 255, 255, .1), rgba(255, 255, 255, .6),rgba(255, 255, 255, .1));
                    }
                    .blue{
                        background: linear-gradient(to right,rgba(0, 117, 194, .1), rgba(0, 117, 194, .6),rgba(0, 117, 194, .1));
                    }
                    .yellow{
                        background: linear-gradient(to right,rgba(255, 200, 0, .1), rgba(255, 200, 0, .6),rgba(255, 200, 0, .1));
                    }
                    .orange{
                        background: linear-gradient(to right,rgba(249, 183, 0, .1), rgba(249, 183, 0, .6),rgba(249, 183, 0, .1));
                    }
                    .red{
                        background: linear-gradient(to right,rgba(230, 0, 18, .1), rgba(230, 0, 18, .6),rgba(230, 0, 18, .1));
                    }
                }
                .radarWh {
                    width: 576.5px*@ratio;
                    height: 439px*@ratio;
                    border-radius: 5px*@ratio;
                }

                iframe {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    z-index: 0;
                }

                .content {
                    height: 441px*@ratio;
                    border-radius: 5px*@ratio;
                    // overflow: hidden;

                    & > li {
                        height: 100%;

                        & > img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }

                .tab {
                    overflow: hidden;
                    height: 158px*@ratio;
                    padding: 12.5px*@ratio 0 0;

                    &>li {
                        float: left;
                        width: 132.5px*@ratio;
                        height: 100%;
                        font-size: 16px*@ratio;
                        text-align: center;
                        margin-right: 16.5px*@ratio;
                        position: relative;
                        cursor: pointer;

                        .rain-map{
                            height: 100%;
                            &>div{
                                width: 50%;
                                margin: 0 0 0 15px*@ratio;
                            }
                        }
                        & > img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        p {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            font-size: 17px*@ratio;
                            color: #fff;
                            line-height: 26px*@ratio;
                            height: 26px*@ratio;
                            background: rgba(0, 0, 0, .3);
                            letter-spacing: 1px*@ratio;
                            z-index: 2;
                        }

                        .chart {
                            height: 100%;
                        }

                        &:last-child {
                            margin: 0;
                        }

                        &:after {
                            content: '';
                            display: block;
                            z-index: 3;
                            position: absolute;
                            width: 100%;
                            height: 151px*@ratio;
                            left: 0;
                            bottom: 0;
                        }

                        &:hover, &.active {
                            &:after {
                                background: url(../assets/images/tab-active.svg) no-repeat center/100% 100%;
                            }
                        }
                    }
                }
            }

            .center {
                float: left;
                @b: 1159px*@ratio;
                width: calc(~'100% - ' @b);
                height: 100%;
                position: relative;
                padding: 0 15px*@ratio;

                #indexMap {
                    width: 100%;
                    height: 510px*@ratio;
                    overflow: hidden;
                }

                .window {
                    position: absolute;
                    left: 15px*@ratio;
                    top: 0;
                    @bb: 30px*@ratio;
                    width: calc(~'100% - ' @bb);
                    height: 510px*@ratio;
                    background: #14274c;
                    z-index: 1000;

                    .title {
                        height: @bb;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 13px*@ratio;
                        color: #fff;
                        padding: 0 15px*@ratio;

                        i {
                            cursor: pointer;
                        }
                    }

                    .body {
                        background: #000d27;
                        height: calc(~'100% - ' @bb);
                    }
                }

                .nav {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    display: flex;
                    justify-content:space-between;
                    width: 100%;
                    z-index: 2;
                    padding: 0 15px*@ratio;

                    .nav-left{
                        background: #051723;
                        border-radius: 3px*@ratio;
                        padding: 0 10px*@ratio;
                        li {
                            cursor: pointer;
                            float: left;
                            text-align: center;
                            color: rgba(254, 255, 255,.7);
                            font-size: 10px*@ratio;
                            padding: 11px*@ratio 7px*@ratio;
                            letter-spacing: 1px*@ratio;

                            p {
                                font-size: 12px*@ratio;
                                padding:7px*@ratio 0 0 ;
                            }
                            span {
                                font-size: 22px*@ratio;

                                &.warn {
                                    color: red;
                                }
                            }
                        }
                    }

                    .nav-right{
                        li {
                            float: left;
                            border: 1px*@ratio solid rgba(255, 255, 255, .5);
                            background: #051825;
                            cursor: pointer;
                            width:70px*@ratio;
                            height: 66px*@ratio;
                            text-align: center;
                            font-size: 12px*@ratio;
                            color: rgba(254, 255, 255, .77);
                            border-radius: 5px*@ratio;
                            margin-right: 3px*@ratio;

                            img {
                                height: 28px*@ratio;
                                margin: 10px*@ratio 0 4px*@ratio;
                            }
                            &.active{
                                background: linear-gradient(to right,#051825, #125378,#051825);
                            }
                        }
                    }
                }
            }
        }
    }
</style>
